<template>
  <el-form label-width="auto" style="max-width: 600px">

    <el-form-item label="弹出选择人员2">
      <el-tag
            v-for="tag in userListArr"
            :key="tag[0]"
            class="dept-people-select-tag-item"
            closable
            :disable-transitions="true"
            @close="handleClose(tag)"
          >
            {{ tag[1].realName }}
          </el-tag>
      <el-button @click="changeUserSelect">选择</el-button>
      <UserSelect v-if="msgData" v-model="msgData" :userFilterList="userListArr" :user-filter-id="deptPeople" @updateDeptPeoples="updateDeptPeoples"></UserSelect>
    </el-form-item>
    <el-form-item label="弹出选择人员3">
      <!-- <UserSelect  v-model="userSelectModel" @change="changeUserSelect"></UserSelect> -->
    </el-form-item>
    <el-form-item label="选择角色人员">
      <PeopleSelect
        v-model="selectedUserIds"
        multiple
        role-code="tester"
      ></PeopleSelect>
    </el-form-item>
    <el-form-item label="单选选择人员">
      <PeopleSelect
        v-model="selectedUserId"
        :users="selectUsers"
      ></PeopleSelect>
    </el-form-item>
    <el-form-item label="多选选择人员">
      <PeopleSelect
        v-model="selectedUserIds"
        multiple
        :users="selectUsers"
      ></PeopleSelect>
    </el-form-item>
    <el-form-item label="部门选择人员多选1">
      <DeptSelect
        v-model="deptPeople"
        multiple
        filterable
        clearable
      ></DeptSelect>
    </el-form-item>
    <el-form-item label="部门选择人员多选2">
      <DeptSelect
        v-model="deptPeople"
        multiple
        filterable
        clearable
      ></DeptSelect>
    </el-form-item>
    <el-form-item label="部门选择人员单选1">
      <DeptSelect
        v-model="deptPeopleString"
        filterable
        clearable
      ></DeptSelect>
    </el-form-item>
    <el-form-item label="部门选择人员单选2">
      <DeptSelect
        v-model="deptPeopleString"
        filterable
        clearable
      ></DeptSelect>
    </el-form-item>
  </el-form>

</template>
<script setup lang="ts">
import type {
  UserModel,
  UserReq,
} from "@/api/system/user/types";
import { ref } from "vue";
import { userApi } from "@/api/system/user/index";
// 测试

// 根据部门下拉框选择人员
const deptPeople = ref([]);
// "3c458013-1b74-4140-9f92-2042c989b05a", "73fa5aef-f2b6-4555-bed5-9604dfa081e2"
const deptPeopleString = ref("3b54c42f-e9da-4ead-bd3a-5074abf00e05");
// 已选择用户ID数组
const selectedUserId = ref("3b54c42f-e9da-4ead-bd3a-5074abf00e05");
// 已选择用户ID数组
const selectedUserIds = ref<string[]>([]);
  // const emit = defineEmits(["updateDeptPeoples"]);
// 可选择用户
let selectUsers = ref<UserModel[]>([]);
// 存放为处理后的id字符串数组
// 存放渲染从子组件拿到的数据
const userListArr = ref<Map<string, UserModel>>(
  new Map<string, UserModel>()
);
console.log(userListArr)
// 查询测试角色启用用户
userApi
  .findList({ roleCode: "tester", hasUserStatus: true } as UserReq)
  .then((res) => {
    selectUsers.value = res.data.results;
  });

// 展示从组件获取到的数据
const msgData = ref<any>();

function changeUserSelect() {
  msgData.value = true;
}

function updateDeptPeoples(value: any) {
console.log(value)
userListArr.value = value;
}

function handleClose(tag: any) {
  // 删除掉用户的ID
  userListArr.value.delete(tag[0]);
  console.log(userListArr.value)
}

</script>
